<template>
  <d2-container>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </d2-container>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import AcessApi from '@/module/system/api/access.api'
import XEUtils from 'xe-utils'
import { GridProxyQueryPageParams } from 'vxe-table/types/grid'
import { ColumnFormatterMethodParams } from 'vxe-table/types/column'
@Component
export default class AccessPage extends Vue {
  accessData: Array<any> = [
    { label: '所有', value: 'UNKNOWN' },
    { label: '登录成员', value: 'LOGIN' },
    { label: '联系人', value: 'CONTACT' },
    { label: '圈子成员', value: 'CIRCLE' },
    { label: '拥有者', value: 'OWNER' },
    { label: '管理员', value: 'ADMIN' }
  ]

  gridOptions = {
    resizable: true,
    border: true,
    showOverflow: true,
    loading: false,
    height: 'auto',
    rowId: 'id',
    data: [],
    exportConfig: {},
    formConfig: {
      data: {
        name: ''
      },
      items: [
        {
          field: 'name',
          title: '对象名称',
          span: 8,
          align: 'center',
          itemRender: { name: '$input', props: { placeholder: '请输入对象名' } }
        },
        {
          itemRender: {
            name: '$buttons',
            children: [
              { props: { type: 'submit', content: '查询', status: 'primary' } },
              { props: { type: 'reset', content: '重置' } }
            ]
          }
        }
      ]
    },
    toolbarConfig: {
      buttons: [
        { code: 'insert_actived', name: '新增', icon: 'fa fa-plus' },
        { code: 'delete', name: '直接删除', icon: 'fa fa-trash-o' },
        { code: 'save', name: '保存', icon: 'fa fa-save', status: 'success' }
      ],
      refresh: true,
      import: true,
      export: true,
      print: true,
      zoom: true,
      custom: true
    },
    proxyConfig: {
      seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
      props: {
        result: '[]',
        total: 'total'
      },
      ajax: {
        // 接收 Promise
        query: (pageParams: GridProxyQueryPageParams) => {
          return AcessApi.page({
            start: pageParams.currentPage * pageParams.pageSize,
            limit: pageParams.pageSize
          })
        }
      }
    },
    pagerConfig: { pageSize: 10 },
    editConfig: {
      trigger: 'click',
      mode: 'row',
      showStatus: true
    },
    columns: [
      { type: 'seq', width: 60 },
      { type: 'checkbox', width: 60 },
      { field: 'Access.name', title: '对象名' },
      {
        field: 'Access.get',
        title: 'get',
        formatter: this.formatAccess,
        editRender: {
          name: '$select',
          options: this.accessData,
          props: { multiple: true, placeholder: '请选择权限' }
        }
      },
      {
        field: 'Access.post',
        title: 'post',
        formatter: this.formatAccess
      },
      {
        field: 'Access.put',
        title: 'put',
        formatter: this.formatAccess
      },
      {
        field: 'Access.delete',
        title: 'delete',
        formatter: this.formatAccess
      },
      {
        field: 'Access.gets',
        title: 'gets',
        formatter: this.formatAccess
      },
      {
        field: 'Access.date',
        formatter: this.formatDate,
        title: '日期',
        showOverflow: true
      }
    ]
  }
  formatDate(params: ColumnFormatterMethodParams) {
    return XEUtils.isNull(params.cellValue)
      ? ''
      : params.cellValue.substr(0, 19)
  }
  formatAccess(params: ColumnFormatterMethodParams) {
    const values: Array<string> = XEUtils.toStringJSON(params.cellValue)
    const findAccessData = XEUtils.filter(this.accessData, item =>
      XEUtils.includes(values, item.value)
    )
    return XEUtils.map(findAccessData, item => item.label).toString()
  }
}
</script>
